{% from '_macros.html' import flash_messages, modal_botton %}
<html>

<head>
    <!-- 用来修正页面在手机端显示不全问题 -->
    <!-- <meta name="viewport"
        content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3"> -->
    {% block head %}
    {% block title %}<title> Strong </title>{% endblock %}

    <!-- 备注：cdn最好下载下来 -->
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.jpg') }}"> <!-- 网站logo -->
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css">  
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/style_all.css') }}">

    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.11.3.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"></script> <!-- socket.io -->

    <!-- echarts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <script src="https://www.runoob.com/static/js/wonderland.js"></script>
    <script src="{{ url_for('static', filename='js/_echarts_config.js') }}"></script>
    {% endblock head %}
</head>

<body>
    <!-- 路由js -->
    {% include '_route.html' %}

    {# 1 上导航栏 #}
    {% block navigation %}
    <!-- Image and text -->
    <nav class="navbar navbar-expand navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img src="{{ url_for('static', filename='img/logo_three.jpg') }}" width="30" height="30"
                class="d-inline-block align-top" alt="">
            Strong
        </a>
        {# 对齐到右侧 text-align:right;?#}
        <div style="margin-left:auto;">
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    {% if session['uname'] %}
                    {{ modal_botton(
                        id='import_user' + [1] | join,
                        btn_class='btn-light btn',
                        btn_name='导入', title='提醒',
                        body='你确定吗？这将覆盖你当前所有数据，且有一定风险，请确保已经“导出”备份。',
                        footer_href=url_for('auth.import_user')
                    )}}
                    <a class="nav-item nav-link" href="{{ url_for('auth.export_user') }}">导出</a>
                    <a class="nav-item nav-link" href="{{ url_for('auth.logout') }}">退出登录</a>
                    {% endif %}
                </div>
            </div>
        </div>

    </nav>
    {% endblock %}

    {% block contain %}
    <div class="container-fluid c-expand">
        <div class="row">

            {# 2 侧栏 #}
            <div class="col-1 hide-sm">
                {% block sidebar %}
                <style>
                    /* 备注：感觉写和组件写在一块才方便看 */
                    div.vertical-buttom {
                        width: 100%;
                    }
                </style>
                <div class="btn-group-vertical vertical-buttom" role="group" aria-label="Basic example">
                    <a href="{{ url_for('auth.home') }}" role="button"
                        class="btn py-2 {% block active_home %}{% endblock %}">首页</a>
                    <a href="{{ url_for('task.task_doing') }}" role="button"
                        class="btn py-2 {% block active_task %}{% endblock %}">ToDo</a>
                    <a href="{{ url_for('data.index') }}" role="button"
                        class="btn py-2 {% block active_data %}{% endblock %}">数据</a>
                    <a href="{{ url_for('auth.following') }}" role="button"
                        class="btn py-2 {% block active_social %}{% endblock %}">朋友</a>
                    {#
                        <a href="{{ url_for('try.chat') }}" role="button"
                            class="btn py-2 {% block active_try %}{% endblock %}">开发中</a>
                    #}
                </div>
                {% endblock sidebar %}
            </div>
            <!-- 底部导航栏版本 -->
            <nav class="navbar hide-lg fixed-bottom navbar-light bg-light nav-buttom">
                <div class="nav-item">
                    <a href="{{ url_for('auth.home') }}" class="ri-user-smile-line icon-size"></a>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <a href="{{ url_for('task.task_doing') }}" class="ri-todo-line icon-size"></a>
                    <span>Todo</span>
                </div>
                <div class="nav-item">
                    <a href="{{ url_for('data.index') }}" class="ri-pie-chart-line icon-size"></a>
                    <span>数据</span>
                </div>
                <div class="nav-item">
                    <a href="{{ url_for('auth.following') }}" class="ri-wechat-line icon-size"></a>
                    <span>朋友</span>
                </div>
            </nav>            

            {# 3 面板 #}
            <div class="col-10 c-expand">

                {# 4 消息闪现-上部 #}
                {{ flash_messages() }}

                {% block content %}
                <p> Hello, welcome to add some content for here! </p>
                {% endblock %}
            </div>
        </div>
    </div>
    {% endblock %}
</body>

</html>